<template>
  <div id="" class="footNav">
    <router-link v-for="(nav,index) in footMenu" :key="nav.key"
    :to="{ name: nav.pathName,params: { }}"
    :class="{active:idx==index}">
      <img :src="nav.imgActive" alt="" v-if="idx==index">
      <img :src="nav.imgUrl" alt="" v-else>
      <p>{{nav.name}}</p>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    footMenu:[{
      pathName:'index',
      imgUrl:require('@/assets/footNav/home_icon_norl.png'),
      imgActive:require('@/assets/footNav/home_icon_sel.png'),
      name:'首页',
      isActive:true,
    },{
      pathName:'events',
      imgUrl:require('@/assets/footNav/Competition_icon_norl.png'),
      imgActive:require('@/assets/footNav/Competition_icon_sel.png'),
      name:'赛事',
      isActive:false,
    },{
      pathName:'playCircle',
      imgUrl:require('@/assets/footNav/circle_icon_norl.png'),
      imgActive:require('@/assets/footNav/circle_icon_sel.png'),
      name:'圈子',
      isActive:false,
    },{
      pathName:'members',
      imgUrl:require('@/assets/footNav/mine_icon_norl.png'),
      imgActive:require('@/assets/footNav/mine_icon_sel.png'),
      name:'我的',
      isActive:false,
    }],
    idx:0,
  }),
  mounted() {
    //do something after mounting vue instance
    let routeName = this.$route.name;
    switch (routeName) {
      case 'members':
        this.idx = 3;
        break;
      case 'index':
        this.idx = 0;
        break;
      case 'events':
        this.idx = 1;
        break;
      case 'playCircle':
      case 'publishCircle':
        this.idx = 2;
        break;
      default:
    }
  }
}
</script>
<style lang="scss" scoped>
.footNav{
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  padding: 6px 0;
  border-top: 1px solid $borderColor;
  text-align: center;
  background: white;
  @include flex;
  a{
    @include flexcell;
    color: $lightColor;
    img{
      width: 20px;
    }
    &.active{
      color: $blueColor;
    }
  }
}
</style>
